<template>
  <div class="header">
    <div class="left">
      <div class="title" :style="{'fontWeight': titleWeight,'fontSize': titleSize}">
        {{ title }}
      </div>
    </div>
    <div class="right">
      <div class="item" v-if="showFullscreen" @click="toggleFullscreen">
        <div :class="[isFullscreen?'active':'','fullscreent']">
          <!-- <screenNarrow v-if="isFullscreen"/>
          <bxFullscreen v-else/> -->

        </div>
      </div>
      <div class="item" v-if="showNotification" @click="handleNotificationCallBack">
        <el-badge :value="notificationNum">
          <el-icon :size="notificationIconSize"><Bell /></el-icon>
        </el-badge>
      </div>
      <div class="item" v-if="$slots.notification"><slot name="notification"></slot></div>
      <el-dropdown size="large" type="primary" :trigger="avatarDropDownTrigger" v-if="showAvatar">
        <div class="item" >
          <el-avatar :size="avatarWidth" :src="avatar" />
          <el-text type="primary" style="margin: 0 12px" v-if="user.name">{{ user.name }}</el-text>
        </div>
        <template #dropdown>
          <el-dropdown-menu :name="'info'">
            <div class="userInfo">
              <el-avatar :size="avatarWidth" :src="avatar" v-if="user.avatar"/>
              <el-text type="primary" style="margin: 0 12px" v-if="user.name">{{ user.name }}</el-text>
              <el-tag v-if="user.roleName">{{ user.roleName }}</el-tag>
            </div>
            <el-dropdown-item v-for="(item,index) in avatarDropdownMenu" :key="item.value" :disabled="item.disabled" :divided="item.divided" @click="()=>item.callback(item)" :name="index">{{ item.text }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!-- <div class="item" v-if="showAvatar"><el-avatar :size="avatarWidth" :src="avatar" style="cursor: pointer" /></div> -->
      <!-- 头像插槽地址 -->
      <div class="item" v-if="$slots.avatar"><slot name="avatar"></slot></div>

      
    </div>
    
  </div>
</template>

<script setup>
import { ElDropdownMenu,ElDropdownItem, ElAvatar,ElIcon} from 'element-plus'
import { Bell,FullScreen } from '@element-plus/icons-vue'
import { useFullscreen } from '@vueuse/core'

// import { UserFilled } from '@element-plus/icons-vue'
const props = defineProps({
  headerProps:{
  title:'', // 一般为项目的名字
  titleWeight:'bold',
  titleSize:'30px',
  height:'48px', // 头部的高度
  backgroundColor:'#eeeeee', // 头部的背景颜色
  showAvatar:false, // 是否展示用户头像组件
  avatarWidth:36, // 头像的宽度 传数字就行
  avatar:'', // 用户头像地址
  avatarDropDownTrigger:'hover',
  avatarDropdownMenu:[], // 用户头像下拉的菜单 具体使用查看v1项目的app.vue文件
  user:{ // 用户相关信息
    name:'',
    avatar:'',
    phone:'',
    roleName:''
  },
  showNotification:false, // 是否展示通知消息开关
  notificationNum:0, // 通知的消息条数
  notificationIconSize:16, // 通知icon的宽高
  handleNotificationCallBack:()=>{},
  showFullscreen:true, // 是否展示全屏按钮
}
})
const { title,titleWeight,titleSize, height, backgroundColor,showAvatar,avatar,avatarWidth,avatarDropdownMenu,avatarDropDownTrigger,user,showNotification,notificationNum,handleNotificationCallBack,notificationIconSize,showFullscreen } = props.headerProps
console.log('user: ', user);

// 全屏相关
const { isFullscreen, enter, exit, toggle } = useFullscreen()
const toggleFullscreen = () => {
  toggle()
}
</script>
<style scoped lang="scss">
// @import '~element-plus/dist/index.css';
.header {
  width: 100%;
  flex-shrink: 0;
  height: v-bind(height);
  background: v-bind(backgroundColor);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  .left{
    padding-left: 8px;
  }
  .right {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    .item {
      padding: 0 8px;
      height: v-bind(height);
      display: flex;
      align-items: center;
      cursor: pointer;
      margin-right: 12px;
      &:hover {
        background: #f5f7fa;
      }
      .fullscreent{
        width: 26px;
        height: 26px;
        background-image: url(../../assets/icon/bx-fullscreen.svg);

        background-size: 100% 100%;
        background-repeat: no-repeat;
        &.active{
        background-image: url(../../assets/icon/screen-narrow.svg);

        }
      }
    }
  }
}
.userInfo {
  width: 200px;
  //   background: red;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  padding: 6px;
  //   box-shadow: 0 1px #dadfe6;
  border-bottom: 1px solid #dadfe6;
}
</style>
